<template>
	<view class="root">
		<view class="play-list-wrap">
			<!-- 播放列表 -->
			<checkbox-group class="list">
				<view class="item" v-for="(item, index) in playList" :key="item.id">
					<view @click="change_item(index)" class="story">
						<view class="story-info">
							<view class="title">{{ item.name }}</view>
							<view class="album">{{ item.album }}</view>
						</view>
					</view>
					<view class="controller">
						<!-- 暂停 -->
						<image v-if="!paused && index == playing" @click="pause" src="@/static/music/pause.png" mode="aspectFit"></image>
						<image v-if="paused && index == playing" @click="pause" src="@/static/music/play.png" mode="aspectFit"></image>
						<!-- 收藏 -->
						<image @click="collecte(index, item.id)" v-if="item.status == 1" style="margin-left: 40upx;" src="../../static/music/collected.png" mode="aspectFit"></image>
						<image @click="collecte(index, item.id)" v-else style="margin-left: 40upx;" src="../../static/music/collect.png" mode="aspectFit"></image>
					</view>
				</view>
			</checkbox-group>
		</view>

		<!-- 底部音频控制器 -->
		<!-- 上方控制按钮  -->
		<view class="audio-controller">
			<view class="top">
				<view class="title">{{ playList[playing].name }}</view>
				<view class="controller-icon">
					<image @click="last_song" src="@/static/music/last.png" mode="aspectFit"></image>
					<image v-if="!paused" @click="pause" src="@/static/music/pause.png" mode="aspectFit"></image>
					<image v-else @click="pause" src="@/static/music/play.png" mode="aspectFit"></image>
					<image @click="next_song" src="@/static/music/next.png" mode="aspectFit"></image>
				</view>
			</view>
			<!-- 下方进度条 -->
			<view class="bottom">
				<view class="progress-bar">
					<slider
						@touchstart="progress_touch_start"
						@change="progress_touch_end"
						blockSize="30"
						blockBgColor="#9a999b"
						bgColor="#f0edf1"
						activeColor="#4fa7df"
						:width="400"
						height="6"
						minDefault="0"
						:maxDefault="progress_max"
					></slider>
				</view>
				<view class="time">
					<text>{{ now }} / {{ duration }}</text>
					<image @click="loop" v-if="recycled" src="@/static/music/recycled.png" mode="aspectFits"></image>
					<image @click="loop" v-else src="@/static/music/recycle.png" mode="aspectFits"></image>
				</view>
			</view>
		</view>
	</view>
</template>
<script>
import slider from '@/components/slider/slider.vue';
var that = null;
const innerAudioContext = uni.getBackgroundAudioManager();
export default {
	data() {
		return {
			id: '', //数据请求id
			paused: false,
			recycled: false,
			playing: 0,
			playList: [
				{
					id: 1,
					image: "https://allinwhat.oss-cn-beijing.aliyuncs.com/%E8%AF%84%E4%B9%A6%20-%20%E8%80%81%E4%BA%BA%E4%B8%8E%E6%B5%B7.jpg",
					name: '评书 - 老人与海',
					album: "老人与海",
					src: "https://allinwhat.oss-cn-beijing.aliyuncs.com/%E8%AF%84%E4%B9%A6%20-%20%E8%80%81%E4%BA%BA%E4%B8%8E%E6%B5%B7.mp3",
					status: 0
				},
				{
					id: 2,
					image: "https://allinwhat.oss-cn-beijing.aliyuncs.com/%E8%A5%BF%E6%B8%B8%E8%AE%B0%E4%B9%8B%E5%B0%B8%E9%AD%94%E4%B8%89%E6%88%8F%E5%94%90%E4%B8%89%E8%97%8F%28%E4%BA%94%E5%8D%81%E4%B8%89%E5%9B%9E%29.jpg",
					name: '西游记之尸魔三戏唐三藏(五十三回)',
					album: "西游记之尸魔三戏唐三藏(五十三回)",
					src: "https://allinwhat.oss-cn-beijing.aliyuncs.com/%E8%A5%BF%E6%B8%B8%E8%AE%B0%E4%B9%8B%E5%B0%B8%E9%AD%94%E4%B8%89%E6%88%8F%E5%94%90%E4%B8%89%E8%97%8F%28%E4%BA%94%E5%8D%81%E4%B8%89%E5%9B%9E%29.mp3",
					status: 0
				},
				{
					id: 3,
					image: "https://allinwhat.oss-cn-beijing.aliyuncs.com/%E4%B8%89%E5%9B%BD%E6%BC%94%E4%B9%89%E4%B9%8B%E7%BE%8E%E9%AB%AF%E5%85%AC%E5%8D%83%E9%87%8C%E8%B5%B0%E5%8D%95%E9%AA%91%E6%B1%89%E5%AF%BF%E4%BE%AF%E4%BA%94%E5%85%B3%E6%96%A9%E5%85%AD%E5%B0%86%EF%BC%88%E7%AC%AC27%E5%9B%9E%EF%BC%89.jpg",
					name: '三国演义之美髯公千里走单骑汉寿侯五关斩六将（第27回）',
					album: "三国演义之美髯公千里走单骑汉寿侯五关斩六将（第27回）",
					src: "https://allinwhat.oss-cn-beijing.aliyuncs.com/%E4%B8%89%E5%9B%BD%E6%BC%94%E4%B9%89%E4%B9%8B%E7%BE%8E%E9%AB%AF%E5%85%AC%E5%8D%83%E9%87%8C%E8%B5%B0%E5%8D%95%E9%AA%91%E6%B1%89%E5%AF%BF%E4%BE%AF%E4%BA%94%E5%85%B3%E6%96%A9%E5%85%AD%E5%B0%86%EF%BC%88%E7%AC%AC27%E5%9B%9E%EF%BC%89.mp3",
					status: 0
				},
				{
					id: 4,
					image: "https://allinwhat.oss-cn-beijing.aliyuncs.com/%E5%8D%95%E7%94%B0%E8%8A%B3%E8%AF%84%E4%B9%A6%EF%BC%9A%E4%B9%8C%E7%9B%86%E8%AE%B0%20.jpg",
					name: '单田芳评书：乌盆记 ',
					album: "单田芳评书：乌盆记 ",
					src: "https://allinwhat.oss-cn-beijing.aliyuncs.com/%E5%8D%95%E7%94%B0%E8%8A%B3%E8%AF%84%E4%B9%A6%EF%BC%9A%E4%B9%8C%E7%9B%86%E8%AE%B0%20.mp3",
					status: 0
				}, 
				{
					id: 5,
					image: "https://allinwhat.oss-cn-beijing.aliyuncs.com/%E4%B8%89%E5%9B%BD%E6%BC%94%E4%B9%89%E5%8F%B8%E9%A9%AC%E5%BE%BD%E5%86%8D%E8%8D%90%E5%90%8D%E5%A3%AB%E5%88%98%E7%8E%84%E5%BE%B7%E4%B8%89%E9%A2%90%E8%8D%89%E5%BA%90%EF%BC%88%E7%AC%AC37%E5%9B%9E%EF%BC%89.jpg",
					name: '三国演义司马徽再荐名士刘玄德三颐草庐（第37回）',
					album: "三国演义司马徽再荐名士刘玄德三颐草庐（第37回）",
					src: "https://allinwhat.oss-cn-beijing.aliyuncs.com/%E4%B8%89%E5%9B%BD%E6%BC%94%E4%B9%89%E5%8F%B8%E9%A9%AC%E5%BE%BD%E5%86%8D%E8%8D%90%E5%90%8D%E5%A3%AB%E5%88%98%E7%8E%84%E5%BE%B7%E4%B8%89%E9%A2%90%E8%8D%89%E5%BA%90%EF%BC%88%E7%AC%AC37%E5%9B%9E%EF%BC%89.mp3",
					status: 0
				}, 
				{
					id: 6,
					image: "https://allinwhat.oss-cn-beijing.aliyuncs.com/%E4%B8%89%E5%9B%BD%E6%BC%94%E4%B9%89%E4%B8%83%E6%98%9F%E6%BD%AD%E8%AF%B8%E8%91%9B%E5%AD%A3%E9%A3%8E%E4%B8%89%E6%B1%9F%E5%8F%A3%E5%91%A8%E7%91%9C%E7%BA%B5%E7%81%AB%EF%BC%88%E7%AC%AC49%E5%9B%9E%EF%BC%89.jpg",
					name: '三国演义七星潭诸葛季风三江口周瑜纵火（第49回）',
					album: "三国演义七星潭诸葛季风三江口周瑜纵火（第49回）",
					src: "https://allinwhat.oss-cn-beijing.aliyuncs.com/%E4%B8%89%E5%9B%BD%E6%BC%94%E4%B9%89%E4%B8%83%E6%98%9F%E6%BD%AD%E8%AF%B8%E8%91%9B%E5%AD%A3%E9%A3%8E%E4%B8%89%E6%B1%9F%E5%8F%A3%E5%91%A8%E7%91%9C%E7%BA%B5%E7%81%AB%EF%BC%88%E7%AC%AC49%E5%9B%9E%EF%BC%89.mp3",
					status: 0
				}, 
				{
					id: 7,
					image: "https://allinwhat.oss-cn-beijing.aliyuncs.com/%E4%B8%89%E5%9B%BD%E6%BC%94%E4%B9%89%E7%94%A8%E5%A5%87%E8%B0%8B%E5%AD%94%E6%98%8E%E5%80%9F%E7%AE%AD%E7%8C%AE%E5%AF%86%E8%AE%A1%E9%BB%84%E7%9B%96%E5%8F%97%E5%88%91%EF%BC%88%E7%AC%AC46%E5%9B%9E%EF%BC%89.jpg",
					name: '三国演义用奇谋孔明借箭献密计黄盖受刑（第46回）',
					album: "三国演义用奇谋孔明借箭献密计黄盖受刑（第46回）",
					src: "https://allinwhat.oss-cn-beijing.aliyuncs.com/%E4%B8%89%E5%9B%BD%E6%BC%94%E4%B9%89%E7%94%A8%E5%A5%87%E8%B0%8B%E5%AD%94%E6%98%8E%E5%80%9F%E7%AE%AD%E7%8C%AE%E5%AF%86%E8%AE%A1%E9%BB%84%E7%9B%96%E5%8F%97%E5%88%91%EF%BC%88%E7%AC%AC46%E5%9B%9E%EF%BC%89.mp3",
					status: 0
				}, 
				{
					id: 8,
					image: "https://allinwhat.oss-cn-beijing.aliyuncs.com/%E4%B8%89%E5%9B%BD%E6%BC%94%E4%B9%89%E5%88%98%E7%8E%84%E5%BE%B7%E6%90%BA%E6%B0%91%E6%B8%A1%E5%86%AE%E8%B5%B5%E5%AD%90%E9%BE%99%E5%8D%95%E9%AA%91%E6%95%91%E4%B8%BB%EF%BC%88%E7%AC%AC41%E5%9B%9E%EF%BC%89.jpg",
					name: '三国演义刘玄德携民渡冮赵子龙单骑救主（第41回）',
					album: "三国演义刘玄德携民渡冮赵子龙单骑救主（第41回）",
					src: "https://allinwhat.oss-cn-beijing.aliyuncs.com/%E4%B8%89%E5%9B%BD%E6%BC%94%E4%B9%89%E5%88%98%E7%8E%84%E5%BE%B7%E6%90%BA%E6%B0%91%E6%B8%A1%E5%86%AE%E8%B5%B5%E5%AD%90%E9%BE%99%E5%8D%95%E9%AA%91%E6%95%91%E4%B8%BB%EF%BC%88%E7%AC%AC41%E5%9B%9E%EF%BC%89.mp3",
					status: 0
				}, 
				{
					id: 9,
					image: "https://allinwhat.oss-cn-beijing.aliyuncs.com/%E4%B8%89%E5%9B%BD%E6%BC%94%E4%B9%89%E8%AF%B8%E8%91%9B%E4%BA%AE%E6%99%BA%E7%AE%97%E5%8D%8E%E5%AE%B9%E5%85%B3%E4%BA%91%E9%95%BF%E4%B9%89%E9%87%8A%E6%9B%B9%E6%93%8D%EF%BC%88%E7%AC%AC50%E5%9B%9E%EF%BC%89.jpg",
					name: '三国演义诸葛亮智算华容关云长义释曹操（第50回）',
					album: "三国演义诸葛亮智算华容关云长义释曹操（第50回）",
					src: "https://allinwhat.oss-cn-beijing.aliyuncs.com/%E4%B8%89%E5%9B%BD%E6%BC%94%E4%B9%89%E8%AF%B8%E8%91%9B%E4%BA%AE%E6%99%BA%E7%AE%97%E5%8D%8E%E5%AE%B9%E5%85%B3%E4%BA%91%E9%95%BF%E4%B9%89%E9%87%8A%E6%9B%B9%E6%93%8D%EF%BC%88%E7%AC%AC50%E5%9B%9E%EF%BC%89.mp3",
					status: 0
				}
			],
			now: '00:00',
			duration: '00:00',
			progress_max: 0
		};
	},
	watch: {
		// 监听播放列表的变化
		playing(val, odlVal) {
			let userInfo = uni.getStorageSync('userInfo');
			console.log('playing:', val);
			console.log('odlVal:', odlVal);
		}
	},
	onLoad(options) {
		that = this;
		innerAudioContext.autoplay = false;
		innerAudioContext.onPlay(() => {
			uni.hideLoading();
		});
		innerAudioContext.onWaiting(function() {
			uni.showLoading({
				title: '正在加载'
			});
		});
		innerAudioContext.onCanplay(function() {
			uni.hideLoading();
		});
		innerAudioContext.onPrev(() => {
			that.last_song();
		});
		innerAudioContext.onNext(() => {
			that.next_song();
		});
		innerAudioContext.onError(res => {
			console.log(res.errMsg);
			console.log(res.errCode);
		});
		innerAudioContext.onTimeUpdate(() => {
			that.now = that.time_format(innerAudioContext.currentTime);
			that.duration = that.time_format(innerAudioContext.duration);
			that.progress_max = parseInt(100 * (innerAudioContext.currentTime / innerAudioContext.duration));
		});
		innerAudioContext.onSeeked(function() {
			innerAudioContext.play();
		});
		innerAudioContext.onPause(function() {
			that.paused = true;
		});
		innerAudioContext.onPlay(function() {
			that.paused = false;
		});
		innerAudioContext.onEnded(() => {
			console.log(':end');
			if (!that.recycled && that.playing < that.playList.length - 1) {
				that.playing++;
				innerAudioContext.src = that.playList[that.playing].src;
				innerAudioContext.title = that.playList[that.playing].name;
			} else if (that.recycled) {
				innerAudioContext.seek(0);
				innerAudioContext.src = that.playList[that.playing].src;
				innerAudioContext.title = that.playList[that.playing].name;
			} else if (!that.recycled && that.playing == that.playList.length - 1) {
				that.playing = 0;
				innerAudioContext.src = that.playList[that.playing].src;
				innerAudioContext.title = that.playList[that.playing].name;
			}
		});
	},
	onShow() {
		innerAudioContext.src = that.playList[that.playing].src;
		innerAudioContext.title = that.playList[that.playing].name;
		// 保持屏幕常亮
		uni.setKeepScreenOn({
			keepScreenOn: true
		});
	},
	onHide() {
		console.log('hide:');
	},
	onUnload() {
		console.log('onUnload pause innerAudioContext');
	},
	components: {
		slider
	},
	methods: {
		//播放器控制相关
		last_song() {
			if (that.playing != 0) {
				that.playing--;
				innerAudioContext.src = that.playList[that.playing].src;
				innerAudioContext.title = that.playList[that.playing].name;
			}
		},
		next_song() {
			if (that.playing < that.playList.length - 1) {
				that.playing++;
				innerAudioContext.src = that.playList[that.playing].src;
				innerAudioContext.title = that.playList[that.playing].name;
			} else if (that.playing == that.playList.length - 1) {
				that.playing = 0;
				innerAudioContext.src = that.playList[that.playing].src;
				innerAudioContext.title = that.playList[that.playing].name;
				uni.pageScrollTo({
					scrollTop: 0
				});
			}else{
				console.log('do nothing ');
			}
		},
		pause() {
			if (innerAudioContext.paused) {
				innerAudioContext.play();
			} else {
				innerAudioContext.pause();
			}
		},
		loop() {
			// innerAudioContext.loop = !innerAudioContext.loop //loop属性为true时不会触发 onEnded()
			this.recycled = !that.recycled;
			if (that.recycled) {
				uni.showToast({
					icon: 'none',
					title: '开启循环'
				});
			}
		},
		go_history() {},
		// 进度条相关
		progress_touch_start() {
			innerAudioContext.pause();
		},
		progress_touch_end(percent) {
			console.log('num :>> ', percent.detail.__args__[0]);
			let s = (percent.detail.__args__[0] / 100) * innerAudioContext.duration;
			innerAudioContext.seek(parseInt(s));
		},
		// 业务逻辑
		change_item(index) {
			that.playing = index;
			innerAudioContext.src = that.playList[that.playing].src;
			innerAudioContext.title = that.playList[that.playing].name;
		},
		// 点赞
		collecte(index, id) {
			that.playList[index].status == 0 ? (that.playList[index].status = 1) : (that.playList[index].status = 0);
		},
		time_format(second) {
			let m = Math.floor((second / 60) % 60) < 10 ? '0' + Math.floor((second / 60) % 60) : Math.floor((second / 60) % 60);
			let s = Math.floor(second % 60) < 10 ? '0' + Math.floor(second % 60) : Math.floor(second % 60);
			return `${m}:${s}`;
		}
	}
};
</script>

<style lang="scss">
.root {
	width: 100%;
}

.play-list-wrap {
	margin-bottom: 300upx;
}

.list {
	width: 100%;

	.item {
		width: 96%;
		padding: 25upx 3%;
		display: flex;
		justify-content: space-between;
		border-bottom: 2upx solid #f0edf1;

		.all {
			font-size: 28upx;

			text {
				display: inline-block;
				margin-left: 15upx;
				font-size: 32upx;
				padding-top: 5upx;
			}
		}

		.delete {
			background: rgba(245, 49, 49, 1);
			border-radius: 8upx;
			padding: 5upx 15upx;
			color: #ffffff;
			font-size: 26upx;
		}

		.story {
			display: flex;
			width: 80%;
			checkbox {
				margin-top: 15upx;
			}

			.story-info {
				margin-left: 15upx;

				.title {
					font-size: 28upx;
				}

				.album {
					font-size: 24upx;
					margin-top: 5upx;
				}
			}
		}

		.controller {
			margin-top: 25upx;

			image {
				display: inline-block;
				width: 32upx;
				height: 32upx;
				margin-right: 20upx;
			}
		}
	}
}

.audio-controller {
	position: fixed;
	z-index: 999;
	width: 100%;
	background: #ffffff;
	bottom: 0upx;

	.top {
		display: flex;
		justify-content: space-between;

		.title {
			width: 57%;
			margin-left: 3%;
			font-size: 30upx;
		}

		.controller-icon {
			display: flex;
			justify-content: space-around;
			width: 40%;

			image {
				display: inline-block;
				height: 30upx;
				width: 30upx;
			}
		}
	}

	.bottom {
		width: 100%;
		display: flex;
		justify-content: space-between;

		.time {
			margin-top: 26upx;
			margin-right: 20upx;
			color: #808080;
			font-size: 28upx;
			display: flex;

			image {
				display: block;
				width: 30upx;
				height: 30upx;
				margin-left: 30upx;
				margin-top: 5upx;
			}
		}
	}
}
</style>